<template>
    <el-container>
        <el-header>
            <div class="left-panel">
               
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
                <scTable
                    ref="mytable"
                    :queryType="'onlineUser/pages'"
                    :data="listData"
                    :queryList="queryList"
                    :column="columnList"
                    :orderList="OrderList"
                    :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    
                    stripe
                    border
                >
                   <el-table-column type="selection" width="50"></el-table-column>
                   <el-table-column label="序号" type="index" width="60" />
                   <el-table-column prop="statusDesc" label="状态" width="100" sortable>
                        <template #default="scope">
                            <el-row :gutter="20" v-if="scope.row.statusDesc=='在线'">
                                <el-col :span="4" style="margin-top: 5px;"><div class="dot-flash" ></div></el-col>
                                <el-col :span="15">在线</el-col>
                            </el-row>
                            <el-row :gutter="20" v-if="scope.row.statusDesc=='离线'">
                                <el-col :span="4" style="margin-top: 5px;"><div class="dot-flash-out" ></div></el-col>
                                <el-col :span="15">离线</el-col>
                            </el-row>
                          
                        </template>
                   </el-table-column>
                    <el-table-column prop="accountId" label="用户ID" width="100" sortable></el-table-column>
                    <el-table-column prop="accountCode" label="用户编码"  width="150" sortable ></el-table-column>
                    <el-table-column prop="accountName" label="用户名称" width="150" sortable></el-table-column>
                    <el-table-column prop="accountMobile" label="用户手机"  width="150" sortable ></el-table-column>

                  
                    <el-table-column prop="orgId" label="门店ID" width="100" sortable></el-table-column>
                    <el-table-column prop="orgName" label="门店名称" width="150" sortable></el-table-column>
                    <el-table-column prop="orgType" label="门店类型" width="120" sortable>
                        <template #default="scope">
                            <el-tag type="primary" effect="dark"  v-if="scope.row.orgType==1">集团</el-tag>
                            <el-tag type="success" effect="dark"  v-else-if="scope.row.orgType==2">门店</el-tag>
                            <el-tag type="warning" effect="dark"  v-else-if="scope.row.orgType==3">供应商</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="loginTime" label="登录时间" width="200" sortable></el-table-column>
                </scTable>
            
        </el-main>
    </el-container>

   
</template>

<script>

import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
export default {
    name: "onlineUser",
    components: {
        publicjs,
    },
    data() {
        return {
            dialogDetail: false,
            //审核状态
            auditState: false,
            showCondition: false,
            selectionRows: [],
            pkList: [""],
            columnList: [],
            OrderList: { },
            queryList: {
              
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
           
            optionsLogSource: [],//消息来源
            optionsLogType: [],//消息分类
            optionsStatus:[],//消息状态
            orgType: 1,

           
        };
    },
    methods: {

        
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
       
       
    },
    async mounted() {
        await this.opBindData();
    },
};
</script>
<style>
.dot-flash {
  width: 15px;
  height: 15px;
  background-color: #13ce66; /* 绿色 */
  border-radius: 50%; /* 圆形 */
  animation: blinker 2s linear infinite;
}
 
.dot-flash-out
{
  width: 15px;
  height: 15px;
  background-color: #ce1313; /* 绿色 */
  border-radius: 50%; /* 圆形 */
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
</style>